<template>
    <div class="page">
      <div class="collection-search" style="display: inline-block;">
        <Button type="warning" style="float: left;" size="large" @click="drawerShow">收藏夹管理</Button>
        <Drawer title="收藏夹管理"  v-model="drawer" width="300px" :mask-closable="true" :styles="styles">
          <Button type="primary" style="width: 300px" @click="addModalShow">新建收藏夹</Button>
          <Modal v-model="modal.addModal" title="新建收藏夹" @on-ok="addFavorites" @on-cancel="resetFormData">
            <Row style="font-size:15px":gutter="5">收藏夹名称：
                <Input placeholder="收藏夹名称：" clearable v-model="formData.favoritesName"></Input>
            </Row>
            <br>
            <Row style="font-size:15px":gutter="5">简介：
                <Input type="textarea" :rows="8" placeholder="简介：" clearable v-model="formData.introduction"></Input>
            </Row>
          </Modal>
          <Menu style="width: 300px;" accordion @on-select="handleSelect" theme="light">
              <MenuItem :name = item.id v-for="item in respFavoritesData.data" @click.native="setFavoritesData(item)">
                <Icon type="ios-heart" />
                {{item.favoritesName}}
                <Dropdown trigger="hover" style="float: right;">
                  <a>
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem name="edit" @click.native.stop="editModalShow(item)">编辑</DropdownItem>
                    <Modal v-model="modal.editModal" title="编辑收藏夹" @on-ok="editFavorites(item)" @on-cancel="resetFormData">
                      <Row style="font-size:15px":gutter="5">收藏夹名称：
                        <Input placeholder="收藏夹名称：" clearable v-model="formData.favoritesName"></Input>
                      </Row>
                      <br>
                      <Row style="font-size:15px":gutter="5">简介：
                        <Input type="textarea" :rows="8" placeholder="简介：" clearable v-model="formData.introduction"></Input>
                      </Row>
                    </Modal>
                    <DropdownItem name="delete" @click.native.stop="deleteFavorites(item)">删除</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </MenuItem>
          </Menu>
        </Drawer>
        <Input placeholder="请输入视频标题" style="width: 300px;margin-left:30px" clearable autofocus></Input>
        <Button type="info" style="margin-left:10px">查询</Button>
      </div>


      <Divider></Divider>
      <span style="font-size: 30px;font-family: 黑体;color: grey;">{{formData.favoritesTitle}}</span>
      <span style="font-size: 15px;font-family: 黑体;color: darkgrey;">{{formData.favoritesIntroduction}}</span>
      <div class="search-videoCardGrid" style="width: 900px;" v-if="formData">
        <Row type="flex" justify="start">
          <Col span="6" v-for="item in respCollectionData.data">
            <div @click="toVideoDetail(item.videoSearchResultDto)">
              <Card :padding=0 style="width: 200px;margin-top: 20px;cursor:pointer" class="search-video-image">
                <div style="overflow: hidden;height: 100px"><img :src="item.videoSearchResultDto.previewImageUrl" style="width: 200px; height: 100px"></div>
                <div style="white-space:normal; word-break:break-all;overflow:hidden;margin: 5px;height:20px;">{{item.videoSearchResultDto.title}}</div>
                <div style="margin-top: 5px;margin-bottom: 5px"><Icon type="logo-youtube" style="margin-left: 5px"/> {{item.videoSearchResultDto.playTimes}}<Icon type="ios-time" style="margin-left: 20px"/>{{item.videoSearchResultDto.createTime.substr(0,10)}}</div>
                <div style="margin-top: 5px;margin-bottom: 5px;color: darkgrey"><Icon type="md-time" />收藏于{{item.createTime.substr(0,10)}}
                  <Dropdown trigger="hover" style="float: right;" placement="bottom-end">
                    <a>
                      <Icon type="ios-arrow-down"></Icon>
                    </a>
                    <DropdownMenu slot="list">
                      <DropdownItem name="delete" @click.native.stop="deleteCollection(item)">取消收藏</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </div>
              </Card>
            </div>
          </Col>
        </Row>
      </div>
      <Page :total="respCollectionData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
            @on-page-size-change="getPageCount" style="margin-top: 50px;align-self: center"></Page>

    </div>
</template>

<script>
    import cookies from 'js-cookie';
    import CollectionService from "../services/CollectionService"
    import FavoritesService from "../services/FavoritesService";
    export default {
        name: "CollectionManageComponent",
        data(){
          return{
            collectionSerivce:null,
            favoritesService:null,
            formData:{
              favoritesName:"",
              favoritesTitle:"",
              favoritesIntroduction:"",
              introduction:"",
              currentPage: 0,
              pageCount: 10,
              curFavoritesId:null,
            },
            respFavoritesData:{data:[], total:null},
            respCollectionData:{data:[], total:null},
            drawer:false,
            modal:{
              addModal:false,
              editModal:false,
            },
            styles: {
              height: '100%',
              overflow: 'auto',
              position: 'static',
              padding: '0'
            },
          }
        },
        created(){
          this.init();
        },
        methods:{
          init(){
            this.collectionSerivce = new CollectionService(this);
            this.favoritesService = new FavoritesService(this);
          },
          searchCollection(currentPage, pageCount){
            let params = {
              "currentPage": currentPage + "",
              "pageCount": pageCount + "",
              "favoritesId": this.formData.curFavoritesId
            };
            this.collectionSerivce.searchCollection(params, function (_this, data) {
              _this.respCollectionData.data = data.data;
              _this.respCollectionData.total = data.page.total;
              console.log(_this.respCollectionData.data);
            });
          },
          deleteCollection(item){
            let selectedIds = [];
            selectedIds.push(item.id);
            this.collectionSerivce.batchDeleteCollections(selectedIds, function(_this, data){
              _this.searchCollection(_this.formData.currentPage, _this.formData.pageCount);
            });
          },
          searchFavorites(currentPage, pageCount){
            let params = {
              "currentPage": currentPage + "",
              "pageCount": pageCount + "",
              "userId" : cookies.get("UserId")
            };
            this.favoritesService.searchFavorites(params, function (_this, data) {
              _this.respFavoritesData.data = data.data;
              _this.respFavoritesData.total = data.page.total;
            });
          },
          addFavorites(){
            let params = {
              "favoritesName": this.formData.favoritesName,
              "introduction": this.formData.introduction,
              "userId": cookies.get("UserId"),
            };
            this.favoritesService.addFavorites(params);
            this.resetFormData();
          },
          editFavorites(item){
            let params = {
              "favoritesName": this.formData.favoritesName,
              "introduction": this.formData.introduction,
              "userId": cookies.get("UserId"),
              "id": item.id
            };
            this.favoritesService.editFavorites(params);
            this.resetFormData();
          },
          deleteFavorites(item){
            let selectedIds = [];
            // console.log(item.id);
            selectedIds.push(item.id);
            this.favoritesService.batchDeleteFavoritess(selectedIds);
          },
          handleSelect(name){
            this.formData.curFavoritesId = name;
            this.searchCollection(this.formData.currentPage, this.formData.pageCount);
          },
          setFavoritesData(item){
            this.formData.favoritesTitle = item.favoritesName;
            this.formData.favoritesIntroduction = item.introduction;
          },
          addModalShow(){
            this.modal.addModal = true;
          },
          editModalShow(item){
            this.formData.favoritesName = item.favoritesName;
            this.formData.introduction = item.introduction;
            this.modal.editModal = true;
          },
          drawerShow(){
            this.searchFavorites(0,100);
            this.drawer = true;
          },
          toVideoDetail(item){
            let routeUrl = this.$router.resolve({
              path: "/videoDetail",
              query: {videoId:item.id}
            });
            window.open(routeUrl.href, '_blank');

          },
          getCurrentPage(num){
            this.formData.currentPage = num-1;
            this.searchVideo(this.formData.currentPage, this.formData.pageCount);
          },
          getPageCount(pageSize){
            this.formData.pageCount = pageSize;
            this.searchVideo(this.formData.currentPage, this.formData.pageCount);
          },
          resetFormData(){
            this.formData.favoritesName = "";
            this.formData.introduction = "";
          },
        }
    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: initial;
  }
  .search-video-image:hover{
    filter: brightness(90%);
    -webkit-transform:translateY(-2px);
  }
</style>
